<template>
	<view class="bs-search">
		<view v-if="leftShow" @click="handSearchSite" class="left-text nowrap">
			<text style="margin-right: 12rpx;" class="site-width">{{site}}</text>
			<u-icon name="arrow-down"></u-icon>
		</view>
		<view class="" style="width:100%;">
			<u-search @custom='search' @blur='blur' @focus='focus' :show-action='searchText' :clearabled="true" placeholder="请输入你要搜索的内容"
			 v-model="keyword">
			</u-search>
		</view>
		<image @click="handScreen" v-if="!searchText" class="search-icon" :src="imgUrl+'shaixuan.png'" mode=""></image>
		<u-select label-name='value' value-name='label' v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	import provinceData from '@/uview-ui/libs/util/province.js'
	import {
		province
	} from '@/utils/province.js'
	export default {
		props: {
			leftShow: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				keyword: '',
				imgUrl: this.configImgUrl,
				list: province,
				show: false,
				site: '全国',
				searchText: false
			};
		},
		methods: {
			search() {
				this.$emit('search', this.keyword)
			},
			handScreen() {
				this.$emit('handScreen', this.keyword)
			},
			handSearchSite() {
				this.show = true
			},
			confirm(e) {
				this.site = e[0].label
				this.$emit('confirm', this.site)
				console.log(this.site);
			},
			focus() {
				this.searchText = true
			},
			blur() {
				this.searchText = false
			}
		}
	}
</script>

<style lang="scss">
	.bs-search {
		height: 134rpx;
		width: 100%;
		box-shadow: 0 0 26px 0 rgba(18, 27, 83, 0.07);
		background-color: $bs-text-color-fff;
		padding: 0 30rpx;
		line-height: 134rpx;
		@include my-flex($fw: no-wrap, $fd:$bs-sb, $ai:center);

		.search-icon {
			width: 40rpx;
			height: 40rpx;
			margin-left: 30rpx;
		}

		.left-text {
			color: $bs-text-color-333;
			@include my-flex($fw: no-wrap, $ai:center);
			font-size: 28rpx;
			margin-right: 30rpx;

			.site-width {
				max-width: 120rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
	}
</style>
